<template>
  <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" :ok-text="'提交'" @before-ok="submit">
    <a-row>
      <a-col :span="6" style="margin-bottom: 20px;">
        <a-button @click="getData"><icon-sync />刷新</a-button>
      </a-col>
    </a-row>
    <a-table :loading="loading" :pagination="false" :stripe="false" :data="tableData" :columns="columns"
      style="height:70vh">
      <template #receive_state="{ record }">
        <sa-radio :disabled="record.receive_state_copy == 1" @change="changeState(record)" :data="STATE_1"
          v-model="record.receive_state"></sa-radio>
      </template>
      <template #state="{ record }">
        <sa-radio :disabled="true" :data="STATE_2" v-model="record.state" v-if="record.receive_state == 0"></sa-radio>
        <sa-radio :disabled="record.receive_state_copy == 1" :data="STATE_3" v-model="record.state" v-else></sa-radio>
      </template>
    </a-table>


  </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import SaRadio from '@cps/sa-radio/index.vue'
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const crudRef = ref()
const emit = defineEmits(["success"]);
// 引用定义
const formRef = ref();
const mode = ref("");
const visible = ref(false);
const loading = ref(false);
const spinLoading = ref(false)
let title = computed(() => {
  return "签收"
});
const STATE_1 = [
  { title: '已收到货', value: 1 },
  { title: '未收到货', value: 0 },
]
const STATE_2 = [
  { title: '待定', value: 0 },
]
const STATE_3 = [
  { title: '正常', value: 1 },
  { title: '瑕疵', value: 2 },
]
const formData = reactive({
  id: '',
})
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100, align: 'center' },
  { title: 'SKU', dataIndex: 'sku', width: 100, align: 'center' },
  { title: '数量', dataIndex: 'num', width: 100, align: 'center' },
  { title: '商品名称', dataIndex: 'goods_name', width: 100, align: 'center' },
  { title: '收货状态', slotName: 'receive_state', width: 180, align: 'center' },
  { title: '检查状态', slotName: 'state', width: 150, align: 'center' },
])
// 打开弹框
const open = async (data) => {
  visible.value = true;
  spinLoading.value = true
  formData.id = data.id
  getData()

};
const tableData = ref([])
const getData = async () => {
  loading.value = true
  const { data } = await AsApi.sign_for_list(formData.id)
  tableData.value = data.list
  tableData.value?.forEach(item => {
    item.receive_state_copy = item.receive_state
  })
  loading.value = false
}
const changeState = (data) => {
  if (data.receive_state == 1) {
    data.state = 1
  } else {
    data.state = 0
  }
}


// 数据保存
const submit = throttle((done) => {
  console.log('111', tableData.value);
  let receive_state = []
  let state = []
  tableData.value?.forEach(async (itm, idx) => {
    receive_state[itm.id]=itm.receive_state
    state[itm.id]=itm.state
    console.log('receive_state',receive_state);
    if (idx == tableData.value.length - 1) {
      loading.value = true;
      try {
        let data = {receive_state,state, ...formData };
        console.log('data', data);
        let result = {};
        result = await AsApi.sign_for_goods(data);

        if (result.code === 200) {
          Message.success("操作成功");
          emit("success");
          done(true);
        }
        // 防止连续点击提交
        setTimeout(() => {
          loading.value = false;
        }, 500);
      } catch {
        loading.value = false;
      }
    }
  })



}, 100);

// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open });
</script>